@charset "utf-8";

// Clearfix
// Source: http://nicolasgallagher.com/micro-clearfix-hack/
//
// For modern browsers
// 1. The space content is one way to avoid an Opera bug when the
//    contenteditable attribute is included anywhere else in the document.
//    Otherwise it causes space to appear at the top and bottom of elements
//    that are clearfixed.
// 2. The use of `table` rather than `block` is only necessary if using
//    `:before` to contain the top-margins of child elements.
@mixin clearfix() {
  &:before,
  &:after {
    display: table; // 2
    content: " "; // 1
  }
  &:after {
    clear: both;
  }
}

//css3 UI规范中新增的一个功能，用来控制内容的可选择性。
@mixin user-select($select) {
  -webkit-user-select: $select;
  //-moz-user-select: $select;
  //-ms-user-select: $select; // IE10+
  user-select: $select;
}

// Box shadow
@mixin box-shadow($shadow...) {
  -webkit-box-shadow: $shadow;
  box-shadow: $shadow;
}

@mixin box-sizing($boxSize) {
  -webkit-box-sizing: $boxSize;
  box-sizing: $boxSize;
}

// Gradients
@mixin linear-gradient($color-from, $color-to) {
  background-color: $color-from; // Old browsers
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,$color-from), color-stop(100%,$color-to)); // Chrome, Safari4+
  background-image: -webkit-linear-gradient(top, $color-from 0%, $color-to 100%);           // Chrome10+, Safari5.1+
  //  background-image:    -moz-linear-gradient(top, $color-from 0%, $color-to 100%);           // FF3.6+
  //  background-image:     -ms-linear-gradient(top, $color-from 0%, $color-to 100%);           // IE10+
  //background-image:      -o-linear-gradient(top, $color-from 0%, $color-to 100%);           // Opera 11.10+
  background-image:         linear-gradient(to bottom, $color-from 0%, $color-to 100%);     // W3C
  //  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#{$color-from}', endColorstr='#{$color-to}', GradientType=0 ); // IE6-9
}
@mixin directional-gradient($color-from, $color-to, $deg: 45deg) {
  background-color: $color-from; // Old browsers
  background-image: -webkit-gradient(linear, left bottom, right top, color-stop(0%,$color-from), color-stop(100%,$color-to)); // Chrome, Safari4+
  background-image: -webkit-linear-gradient(45deg, $color-from 0%, $color-to 100%);           // Chrome10+, Safari5.1+
  //  background-image:    -moz-linear-gradient(45deg, $color-from 0%, $color-to 100%);           // FF3.6+
  //  background-image:     -ms-linear-gradient(45deg, $color-from 0%, $color-to 100%);           // IE10+
  //background-image:      -o-linear-gradient(45deg, $color-from 0%, $color-to 100%);           // Opera 11.10+
  background-image:         linear-gradient(45deg, $color-from 0%, $color-to 100%);     // W3C
  //  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#{$color-from}', endColorstr='#{$color-to}', GradientType=1 ); // IE6-9
}


// Transforms
// --------------------------------------------------
@mixin transform($transform...) {
  -webkit-transform: $transform;
  //-ms-transform: $transform;
  transform: $transform;
}


// Transitions
// --------------------------------------------------
@mixin transition($transition...) {
  -webkit-transition: $transition;
  transition: $transition;
}
@mixin transition-property($property...) {
  -webkit-transition-property: $property;
  transition-property: $property;
}
@mixin transition-duration($duration...) {
  -webkit-transition-duration: $duration;
  transition-duration: $duration;
}
@mixin transition-timing-function($function...) {
  -webkit-transition-timing-function: $function;
  transition-timing-function: $function;
}
@mixin transform-origin ($origin...) {
  transform-origin: $origin;
  -webkit-transform-origin: $origin;
}

// Animations
// --------------------------------------------------
@mixin animation-name($name) {
  -webkit-animation-name: $name;
  //-moz-animation-name: $name;
  animation-name: $name;
}
@mixin animation-duration($duration) {
  -webkit-animation-duration: $duration;
  //-moz-animation-duration: $duration;
  animation-duration: $duration;
}
@mixin animation-direction($direction) {
  -webkit-animation-direction: $direction;
  //-moz-animation-direction: $direction;
  animation-direction: $direction;
}


// Misc
// --------------------------------------------------
@mixin hairline($type:single, $color:$border-color-default, $width:1px, $offset:0, $offsetRight:0, $scale:1) {
  &:after{
    position: absolute;
    left: $offset;
    right: $offsetRight;
    @if $type == top {
      top: 0;
    } @else {
      bottom: 0;
    }
    height: $width;
    background-color: $color;
    content:'';
    -webkit-transform: scaleY($scale);
    transform: scaleY($scale);
  }
  @if $type == double {
    &:before{
      position: absolute;
      left: $offset;
      right: $offsetRight;
      top: 0;
      height: $width;
      background-color: $color;
      content:'';
      -webkit-transform: scaleY($scale);
      transform: scaleY($scale);
    }
  }
}
@mixin hairline-horizontal($type:single, $color:$border-color-default, $width:1px, $offset:0, $offsetRight:0, $scale:1) {
  &:after{
    position: absolute;
    top: $offset;
    bottom: $offsetRight;
    @if $type == left {
      left: 0;
    } @else {
      right: 0;
    }
    width: $width;
    background-color: $color;
    content:'';
    -webkit-transform: scaleX($scale);
    transform: scaleX($scale);
  }
  @if $type == double {
    &:before{
      position: absolute;
      top: $offset;
      bottom: $offsetRight;
      left: 0;
      width: $width;
      background-color: $color;
      content:'';
      -webkit-transform: scaleX($scale);
      transform: scaleX($scale);
    }
  }
}

// Filling-in
// --------------------------------------------------
@mixin absolute($top:0, $right:0, $bottom:0, $left:0) {
  position: absolute;
  top: $top;
  right: $right;
  bottom: $bottom;
  left: $left;
}

@mixin display-flex {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
}

@mixin flex($flex...) {
  -webkit-flex: $flex;
  flex: $flex;
}


//icons
@mixin icon($size: 30px, $fontSize: 18px) {
  display: inline-block;
  width: $size;
  height: $size;
  vertical-align: top;
  line-height: $size;
  text-align: center;
  font-size: $fontSize;
}